<template>
  <view class="work-container">
    <!-- 轮播图 -->
    <view class="banner-box">
      <swiper 
        :circular="true" 
        :autoplay="true" 
        :interval="3000" 
        :duration="1000"
        @change="onSwiperChange"
        :indicator-dots="false"
        class="banner-swiper"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <view class="banner-item">
            <view class="banner-image" :style="{ backgroundImage: 'url(' + item.image + ')' }"></view>
          </view>
        </swiper-item>
      </swiper>
      
      <!-- 指示器 -->
      <view class="indicator">
        <view 
          v-for="(item, index) in bannerList" 
          :key="index" 
          :class="['dot', currentIndex === index ? 'active' : '']"
        ></view>
      </view>
    </view>

    <!-- 宫格组件 -->
    <uni-section title="工作台" type="line"></uni-section>
    <view class="grid-body">
      <uni-grid :column="4" :showBorder="false" @change="changeGrid">
        <uni-grid-item>
          <view class="grid-item-box">
            <uni-icons type="person-filled" size="30"></uni-icons>
            <text class="text">考勤记录</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentIndex: 0,
        bannerList: [
          { image: '/static/images/banner/boat.jpg' },
          { image: '/static/images/banner/sky.jpg' }
        ]
      }
    },
    methods: {
      onSwiperChange(e) {
        this.currentIndex = e.detail.current;
      },
      changeGrid(e) {
        let index = e.detail.index
        switch(index) {
          case 0: // 记录查询
            uni.navigateTo({
              url: './record/index',
              success: () => {
                console.log('跳转到记录查询页面')
              },
              fail: (err) => {
                console.error('跳转失败:', err)
                this.$modal.showToast('跳转失败，请重试')
              }
            })
            break
          default:
            this.$modal.showToast('模块建设中~')
        }
      }
    }
  }
</script>

<style>
/* 重置基础样式 */
page {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.work-container {
  width: 100%;
  padding: 0;
}

/* 轮播图样式 */
.banner-box {
  width: 100%;
  height: 360rpx;
  position: relative;
  overflow: hidden;
}

.banner-swiper {
  width: 100%;
  height: 100%;
}

.banner-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.banner-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 指示器样式 */
.indicator {
  position: absolute;
  bottom: 20rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 6rpx;
  background-color: rgba(255, 255, 255, 0.5);
  margin: 0 6rpx;
  transition: all 0.2s;
}

.dot.active {
  width: 20rpx;
  background-color: #ffffff;
}

/* 宫格样式 */
.text {
  text-align: center;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.grid-item-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}
</style>
